<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0;margin: 0;}
        html,body{width: 100%;height: 100%;overflow: hidden;}
        .login{width: 400px;height: 200px;position: absolute;left: 0;top: 0;display: none;}
        .login_title{width: 400px;height: 30px;line-height: 30px;background-color: red;position: relative;}
        .login_title span{
            position: absolute;right: 10px;cursor: pointer;
        }
        .login_form{
            width: 100%;height: 180px;line-height: 40px;background-color: aqua;
        }
        .mask{
            width: 100%;height: 100%;position: absolute;left: 0;top: 0;
            opacity: 0.3;background-color: black;display: none;
        }
    </style>
</head>
<body>
    <div class="baidu">
        <a href="javascript:;">登录</a>
        <div class="mask"></div>
        <div class="login">
            <div class="login_title">用户登录<span>X</span></div>
            <div class="login_form"></div>
        </div>
    </div>
    <script>
        // 1.点击登录,显示 遮罩层和登录框
        // 2.登录框始终都是居中的
        // 3.点击登录框的标题,登录框可以拖拽的
        // 4,登录框限定范围
        // 5.登录框点击X,关闭遮罩层和整个登录框

        // 0-获取元素,---封装函数

        function $(selector,flag) {//selector选择器 flag可选地,
            if(flag){
                return document.querySelectorAll(selector)
            }else{
                return document.querySelector(selector)
            }
        }

        var link=$('.baidu a');//获取登录按钮
        var mask=$('.mask');//获取遮罩层
        var login=$(".login");//获取登录框
        var login_title=$('.login_title');//获取标题
        var closeSpan=$('.baidu span');//获取x


         // 1.点击登录,显示 遮罩层和登录框
         link.addEventListener('click',function(){
            mask.style.display="block";
            login.style.display="block";
              // 2.登录框始终都是居中的
              login.style.left=(document.documentElement.clientWidth-login.offsetWidth)/2+"px";
              login.style.top=(document.documentElement.clientHeight-login.offsetHeight)/2+"px";

              window.addEventListener('resize',function(){
                login.style.left=(document.documentElement.clientWidth-login.offsetWidth)/2+"px";
              login.style.top=(document.documentElement.clientHeight-login.offsetHeight)/2+"px";
              })
         })

         // 3.点击登录框的标题,登录框可以拖拽的
         login_title.addEventListener("mousedown",function (e) {
            e=e||event;
            var sx=e.offsetX;
            var sy=e.offsetY;
           
            function move(e){//事件处理函数
                e=e||event;
                //限定范围
                var leftPosition=e.clientX-sx;
                var topPosition=e.clientY-sy;
                if(leftPosition<=0){
                    leftPosition=0;
                }else if(leftPosition>=document.documentElement.clientWidth-login.offsetWidth){
                    leftPosition=document.documentElement.clientWidth-login.offsetWidth
                }
                if(topPosition<=0){
                    topPosition=0;
                }else if(topPosition>=document.documentElement.clientHeight-login.offsetHeight){
                    topPosition=document.documentElement.clientHeight-login.offsetHeight
                }
                login.style.left=leftPosition+"px";
                login.style.top=topPosition+"px";
            }
           document.addEventListener('mousemove',move);
           document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
           });
        })

        // 5.登录框点击X,关闭遮罩层和整个登录框
        closeSpan.addEventListener('click',function () {
            mask.style.display="none";
            login.style.display="none";
          })


    </script>
</body>
</html>